<template>
  <div class="list-wrap">
    <header>
      <el-form :model="searchModel" inline label-width="120">
        <el-form-item label="搜索内容：">
          <el-input v-model="searchModel.text" @keydown="onKeydown">
            <template #suffix>
              <Search @click="onSearch" style="width: 1em; height: 1em; margin-right: 8px" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </header>
    <main>
      <section class="op-area">
        <el-button @click="onCreate" type="primary">新建</el-button>
        <el-button @click="onDelete()" type="danger">删除</el-button>
      </section>
      <section class="table-wrap" ref="tableWrapEl">
        <el-table :data="listData" :max-height="maxTableHeight" @selection-change="onSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="性别" prop="sex">
            <template v-slot="{ row }">
              {{ formatDict(row.sex, 'sex') }}
            </template>
          </el-table-column>
          <el-table-column label="账号" prop="account"></el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button @click="onEdit(row)" type="text">编辑</el-button>
              <el-button @click="onDelete(row)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <section class="pagination-wrap">
        <Pagination :total="total" :page-no="page.pageNo" :page-size="page.pageSize" @reload="onPageReload"></Pagination>
      </section>
    </main>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, Ref, nextTick } from 'vue'
import demoApi, { DemoApi } from '@/request/demo'
import Pagination from '@/components/pagination.vue'
import { formatDict } from '@/core/dict'
import { Search } from '@element-plus/icons'
import { useTableHeight } from '@/plugins/use-table-height'
import { useTableDelete } from '@/plugins/use-table-delete'
import { Demo } from '@/model/demo'
const emit = defineEmits(['gotoDetail'])
const listData = ref([]) as Ref<Demo[]>
const total = ref(0)
const page = ref({ pageNo: 1, pageSize: 10 })
const searchModel = ref(getDefaultSearchModel())
const { maxTableHeight, tableWrapEl } = useTableHeight()
const { onDelete, onSelectionChange } = useTableDelete<Demo, DemoApi>(demoApi)
function getDefaultSearchModel() {
  return {
    text: '',
  }
}
function onSearch() {
  refresh()
}
function onReset() {
  searchModel.value = getDefaultSearchModel()
}

function onPageReload(p: R.Page) {
  page.value = p
  refresh()
}

function onKeydown(evt: KeyboardEvent) {
  if (evt.key.toLocaleLowerCase() == 'enter') {
    onSearch()
  }
}

async function refresh() {
  let { list, total: t } = await demoApi.getList(searchModel.value.text, page.value)
  listData.value = list
  total.value = t
}
function onCreate() {
  emit('gotoDetail')
}
function onEdit(row: Demo) {
  emit('gotoDetail', row.id)
}
</script>
<style lang="less">
.list-wrap {
  // color: @dangerColor;
  height: 100%;
  padding: @basePadding*2 @basePadding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  > header {
    box-shadow: 0 1px 0 #ccc;
  }
  > main {
    flex: 1;
    display: flex;
    flex-direction: column;
    > .op-area {
      box-shadow: 0 1px 0 #ccc;
      padding: @basePadding*.5 0;
    }
    > .table-wrap {
      flex: 1;
      margin-top: 1px;
    }
    > .pagination-wrap {
      height: 60px;
      display: flex;
      align-items: center;
      // justify-content: stretch;
      > .el-pagination {
        width: 100%;
      }
      // line-height: 60px;
    }
  }
}
</style>
